<template>
  <div
    class="echarts"
    id="echartsist"
    ref="chartReflist"
    style="width: 100%; height: 240px"
  ></div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import * as echarts from "echarts/core";
import { BarChart, LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  // 数据集组件
  DatasetComponent,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent,
  // 新增：图例组件
  LegendComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import type {
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption,
  LineSeriesOption,
} from "echarts/charts";
import type {
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  TooltipComponentOption,
  GridComponentOption,
  DatasetComponentOption,
  // 新增：图例组件类型定义
  LegendComponentOption,
} from "echarts/components";
import type { ComposeOption } from "echarts/core";
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
  | LegendComponentOption // 新增：图例组件类型
>;
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  // 新增：注册图例组件
  LegendComponent,
]);
const chartReflist = ref<HTMLElement | null>(null);
  const props = defineProps<{
    week_listdata: [];
    week_listrawData: [];
}>();
const initChart = () => {
  if (chartReflist.value) {
    const chart = echarts.init(chartReflist.value);
    // There should not be negative values in rawData
    // const rawData = [
    //   [100, 302, 301, 334, 390, 330],
    //   [320, 132, 101, 90, 230, 210],
    // ];
    // const totalData = [];
    // for (let i = 0; i < rawData[0].length; ++i) {
    //   let sum = 0;
    //   for (let j = 0; j < rawData.length; ++j) {
    //     sum += rawData[j][i];
    //   }
    //   totalData.push(sum);
    // }

    // const grid = {
    //   // left: 100,
    //   // right: 100,
    //   // top: 50,
    //   // bottom: 40,
    // };
    // const seriesColors = ["#5AD8A6", "#5B8FF9 "]; // 定义每个系列对应的颜色
    // const series = ["Direc", "Mail Ad"].map((name, sid) => {
    //   return {
    //     name,
    //     type: "bar",
    //     stack: "total",
    //     barWidth: "60%",
    //     data: rawData[sid],
    //     itemStyle: {
    //       color: seriesColors[sid], // 根据索引设置颜色
    //     },
    //   };
    // });
    const optionlist = {
      title: {
        text: "成绩分析",
      },
      tooltip: {
        trigger: "axis",
      },
    //   legend: {
    //     right: "10%", // 距离图表右侧 10% 的位置
    //     // data: ["Email"],
    //   },
     
      grid: {
        // left: "3%",
        // right: "4%",
        bottom: 40,
        // containLabel: true,
      },
      toolbox: {
        feature: {
          // saveAsImage: {},//右上角下载
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: props.week_listdata,
         
axisLabel: {
    interval: 0,       // 强制显示所有标签
    rotate: 0,        // 标签旋转角度（长标签时适用）
    width: 100,         // 标签最大宽度
    overflow: 'break'   // 超出时换行
  }
      },
      yAxis: {
        type: "value",
        max: 100 //
      },
    //   yAxis: {
    //     //   min: 0, // 若需要可以设置最小值，这里设置为 0
    //     设置 y 轴的最大值为 100
    //   },
      series: [
        {
          name: "成绩",
          type: "line",
          stack: "Total",
          
          data: props.week_listrawData,
        },
      ],
    };
    const chartDom = document.getElementById("echartsist");
    if (chartDom) {
      const myChart = echarts.init(chartDom);
      myChart.setOption(optionlist);
      // 监听窗口大小变化事件
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
    chart.setOption(optionlist);
  }
}
// 在子组件中
watch(() => props.week_listdata, (newVal) => {
  // 重新绘制图表
  initChart();
}, { deep: true });
onMounted(() => {
  initChart()


});
</script>
<style lang="less" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
